{% extends 'base/base.html' %}
{% block title %}
<title>agem登录</title>
{% endblock %}
{% block css %}
<style>
.btn-regist {
    --bs-btn-color: #dc3545;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #a52834;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dc3545;
    --bs-btn-disabled-border-color: #dc3545;
}
    .state, .password_state{
       float:right;
       margin-top: -25px;
       margin-right: 10px;
       display: inline-block;
       width: 16px;
       height:16px;
       line-height:20px;
       text-align:center;
       background-position: center;
    }
    .unpass{
       background-image: url(/static/img/unpass.png);
    }
    .pass{
       background-image: url(/static/img/pass.png);
    }
    .open{
       background-image: url(/static/img/open.png);
    }
    .close{
       background-image: url(/static/img/close.png);
    }
</style>
{% endblock %}
{% block body %}
<div class="body_content_wrapper pb-2">
    <div class="container xcontainer">
        <section class="bg-dark rounded-3 g-0 p-3 text-white">
            <div id="user_profile_wrapper">
                <div class="video_list_box mb-3">
                    <div class="video_list_box--hd">
                            <h6 class="title"><script>document.writeln(AGE.hello());</script></h6>
                    </div>
                    <div class="video_list_box--bd">
                        <div class="row">
                            <div class="profile_list col-2">
                                <div class="list-group list-group-flush">
                                    <a class="list-group-item d-flex justify-content-between align-items-center  active " href='{% url "user:login" %}'>登录 <i class="bi bi-asterisk"></i></a>
                                    <a class="list-group-item d-flex justify-content-between align-items-center" href='{% url "user:regist" %}'>注册 <i class="bi bi-asterisk"></i></a>
                                </div>
                            </div>
                            <div class="col-10">
                                <div class="video_list_box collect_list">
                                <div class="video_list_box--bd">
                                    <form id="resetPasswordForm" class="reset_password_form" action="#" method="post">
                                        {% csrf_token %}
                                        <div class="input-group-sm mb-2">
                                            {{ lgf.username.label_tag }}
                                            {{ lgf.username }}
                                              <span class="state"></span>
                                        </div>
                                        <div class="input-group-sm mb-2">
                                             {{ lgf.password.label_tag }}
                                            {{ lgf.password }}
                                            <span class="password_state close"></span>
                                        </div>
                                        {% if errors %}
                                            <div class="tips mt-2 failed" style="display: block;">{{ errors }}</div>
                                        {% endif %}
<!--                                        <div class="third">-->
<!--                                            <a href="https://api.weibo.com/oauth2/authorize?client_id=1491813750&redirect_uri=http://127.0.0.1:8000/user/auth">-->
<!--                                            <img style="width:50px" src="/static/img/sinaweibo.png">-->
<!--                                            </a>-->
<!--                                        </div><br>-->
                                        <button id="btnPasswordChange" type="submit" class="btn btn-primary btn-sm">登录</button>
                                        <a href='{% url "user:regist" %}' id="btnLogAndReg2" type="button" class="btn btn-sm btn-regist">没有账号？注册</a>
                                    </form>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
</div>
{% endblock %}
{% block js %}
<script>
    $(function(){
        $("#username").keyup(function(){
            console.log($(this).val());
            $.ajax({
                url: "/user/check_username/",
                method: "get",
                data:{
                    username: $(this).val()
                },
                success:function(res){
                    if(res.code==0){
                        $(".state").removeClass("unpass");
                        $(".state").addClass("pass");
                    }
                    else{
                        $(".state").removeClass("pass");
                        $(".state").addClass("unpass");
                    }
                }
            })
        })
        $(".password_state").click(function(){
            if ($(this).hasClass("open")) {
                $(this).removeClass("open").addClass("close");
                $(".password_state").prev().attr("type", "password")
            } else {
                $(this).removeClass("close").addClass("open");
                $(".password_state").prev().attr("type", "text")
            }        
        })
    })
</script>
{% endblock %}
